<script setup lang="ts">
import pages from "@/router/pages";
const props = defineProps({ isCollapse: { type: Boolean, default: false } });
// const {isCollapse=false}=defineProps<{isCollapse:boolean}>()
</script>
<!-- 侧边菜单 isCollapse为折叠状态-->
<template>
  <el-menu
    :collapse="isCollapse"
    active-text-color="#fad701"
    router
    text-color="#fff"
    background-color="#304156"
    :default-active="$route.path"
  >
    <el-menu-item
      index="/index/homepage"
      v-for="item in pages.slice(0, 1)"
      :key="item.name"
    >
      <el-icon>
        <i :class="'iconfont ' + item.meta?.icon"></i>
      </el-icon>
      <span>{{ $t(item.meta?.title) }}</span>
    </el-menu-item>
    <el-sub-menu
      :index="`/index/${item.path}`"
      v-for="item in pages.slice(1)"
      :key="item.name"
    >
      <template #title>
        <el-icon>
          <i :class="'iconfont ' + item.meta?.icon"></i>
        </el-icon>
        <span>{{ $t(item.meta?.title) }}</span>
      </template>
      <el-menu-item
        :index="`/index/${item.path}/${v.path}`"
        v-for="v in item.children"
        v-show="!(v.meta as any).hidden"
      >
        <span>{{ $t(v.meta.title) }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped lang="less">
.el-menu {
  min-height: 100vh;
  border: 0;

  // width: 200px;
  // &表示上级
  &:not(.el-menu--collapse) {
    width: 200px;
  }
}
</style>
